<template>
    <div class="zw-pagination">
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :current-page="currentPage"
            @size-change="changeSizeHandler"
            @current-change="changePageHandler">
        </el-pagination>
    </div>
</template>
<script setup>
defineProps({
    total: {
        type: Number,
        default: 0
    },
    pageSizes: {
        type: Array,
        default: () => [10, 20, 50, 100]
    },
    pageSize: {
        type: Number,
        default: 10
    },
    currentPage: {
        type: Number,
        default: 1
    }
});

const emit = defineEmits(['pageChange', 'sizeChange']);

const changePageHandler = pageNum => {
    emit('pageChange', pageNum);
};

const changeSizeHandler = pageSize => {
    emit('sizeChange', pageSize);
};
</script>
<style lang="scss" scoped></style>
